<template>
	<div>
		<scroller lock-x height="-50">
			<div class="wrap">
		  		<div class="trade-top">
		  			<div class="location ellipsis" @click="citysopen">
		  				<i class="location-icon"></i>
		  				<span v-if="locationcity">{{locationcity}}</span>
		  				<span v-if="locationprovince">{{ locationprovince }}</span>
		  				<span v-if="locationaddress">{{locationaddress}}</span>
		  				<span v-else>全国</span>
		  			</div>
		  			<div class="search-wraper">
		  				<a :href="'#/trade/search'">
							<i class="search-icon"></i>
							<span>请输入搜索内容</span>
						</a>
		  			</div>
		  		</div>
		  		<div class="banner-wraper">
		  			<swiper loop auto height="170px">
		  				<swiper-item class="black" v-for="(ban,index) in banner" :key="ban.id">
		  					<a class="index-banner" target="_blank" v-bind:style="{backgroundImage: 'url(' + ban.pic+'?imageView2/2/w/500)'}" :href="ban.uri"></a>
		  				</swiper-item>
		  			</swiper>
		  		</div>
		  		<div class="main-panel vux-1px-b">
		  			<a class="buy_panel vux-1px-r" :href="'#/trade/demands'"></a>
		  			<a class="sale_panel" :href="'#/trade/supplies'"></a>
		  		</div>
		  		<div class="release-wraper">
		  			<a class="rel-bnt" @click="releaseopen">发布供求</a>
		  		</div>
		  		<div class="hot-wrap">
			  		<div class="hot-tittle">
			  			<i class="hot-icon"></i>
			  			<span>当季热卖</span>
			  		</div>
					<div v-if="kindloading == true && kindStatus === 'loading'" class="load_wrap" >
						<i class="fa fa-spinner fa-pulse"></i>
						数据加载中...
					</div>
					<div v-else-if="kindStatus === 'error'" class="load_wrap error" @click="getloadingdata()">
						<i class="fa fa-frown-o"></i>
						加载失败，点击刷新
					</div>
					<div class="hot-fish-wraper" v-else>
						<scroller lock-y :scrollbar-x=false>
					  		<ul class="hot-fish-ul" >
					          <li class="hot-fish-item" v-for="(data,index) in kind" :key="index">
					          	<router-link :to="{name: 'supplies', query: {'kind_id': data.id}}">
					          		<div class="hot-fish-img" v-bind:style="{backgroundImage: 'url(' + data.img_view+'?imageView2/2/w/200)'}"></div>
					          		<div class="hot-fish-name">
					          			<div class="name-v"><span class="ellipsis-2">{{data.name}}</span></div>
					          		</div>
				          		</router-link>
					          </li>
					        </ul>
				        </scroller>
			      </div>
			  	</div>
			  	<div class="demand-list">
		  			<div class="demand-list-wrap">
		  				<div class="list-tittle vux-1px-b">
		  					<div class="tittle-lm">
		  						<i class="demand-lm-icon"></i>
		  						<span>求购</span>
		  					</div>
		  					<a class="more-icon" :href="'#/trade/demands'"></a>
		  				</div>
	  					<div v-if="demandloading == true && demandStatus === 'loading'" class="load_wrap" >
							<i class="fa fa-spinner fa-pulse"></i>
							数据加载中...
						</div>
						<div v-else-if="demandStatus === 'error'" class="load_wrap error" @click="getloadingdata()">
							<i class="fa fa-frown-o"></i>
							加载失败，点击刷新
						</div>
		  				<div class="demand-list-item" v-for="(data,index) in demandList" v-else>
		  					<a :href="'#/trade/demand/' + data.id ">
			  					<div class="buy-wraper line-one">
			  						<div class="buy-name ellipsis">{{data.kind_name}}</div>
			  						<div class="buy-stone ellipsis">求购：<big>{{data.stock}}</big><span>斤</span></div>
			  					</div>
			  					<div class="buy-wraper line-two">
			  						<div class="buy-address ellipsis">
			  							<label class="address-wrapper ellipsis">
				  							<i class="address-icon"></i>
											<span>{{data.province_name}}</span>
											<span>{{data.city_name}}</span>
										</label>
										<label class="wl" v-show="data.logistics===1">
											<i class="wl-car"></i>
											<span>物流</span>
										</label>
			  						</div>
			  						<div class="buy-size ellipsis">规格：
			  							<label v-if="data.size_unit_name"><span>{{data.size_min}}</span>-<span>{{data.size_max}}</span><span>{{data.size_unit_name}}</span></label>
			  							<label v-else>不限</label>
			  						</div>
			  					</div>
			  					<div class="buy-wraper line-three">
			  						<div class="buy-autor">
			  							<label class="name ellipsis">
			  								<span v-if="data.verify_classify" v-text="data.verify_name"></span>
			  								<span v-else v-text="data.contact_name"></span>
			  							</label>
										<span class="verify-type firm-jxs" v-if="data.verify_classify==2&&data.verify_type==3"></span>
										<span class="verify-type firm-pfs" v-if="data.verify_classify==2&&data.verify_type==13"></span>
										<span class="verify-type own-jxs" v-if="data.verify_classify==1&&data.verify_type==3"></span>
										<span class="verify-type own-pfs" v-if="data.verify_classify==1&&data.verify_type==13"></span>
										<span class="verify-type own-yf" v-if="data.verify_classify==1&&data.verify_type==12"></span>
										<span class="verify-type own-ywy" v-if="data.verify_classify==1&&data.verify_type==2"></span>
										<span class="verify-type own-yzh" v-if="data.verify_classify==1&&data.verify_type==4"></span>
										<span class="verify-type own-yzj" v-if="data.verify_classify==1&&data.verify_type==11"></span>
			  						</div>
			  						<div class="buy-time ellipsis">{{data.updated_view}}</div>
			  					</div>
			  					<div class="buy-requirement ellipsis" v-if="data.desc_tag.length || data.desc">
			  						具体要求：
		  							<span v-for="tab in data.desc_tag">{{tab}}</span>
		  							<label>{{data.desc}}</label>
			  					</div>
			  				</a>
		  				</div>
		  			</div>
		  			<div class="read-more vux-1px-t">
		  				<a class="more-ifo" :href="'#/trade/demands'">查看更多</a>
		  			</div>
		  		</div>
		  		<div class="supply-list">
					<div class="supply-list-wrap">
						<div class="list-tittle vux-1px-b">
		  					<div class="tittle-lm">
		  						<i class="supply-lm-icon"></i>
		  						<span>供应</span>
		  					</div>
		  					<a class="more-icon" :href="'#/trade/supplies'"></a>
		  				</div>
	  					<div v-if="supplyloading == true && supplyStatus === 'loading'" class="load_wrap" >
							<i class="fa fa-spinner fa-pulse"></i>
							数据加载中...
						</div>
						<div v-else-if="supplyStatus === 'error'" class="load_wrap error" @click="getloadingdata()">
							<i class="fa fa-frown-o"></i>
							加载失败，点击刷新
						</div>
						<div class="supply-list-item vux-1px-b" v-for="(data,index) in supplyList" v-else>
							<a :href="'#/trade/supply/' + data.id ">
								<div class="item-img vux-1px" v-bind:style="{backgroundImage: 'url(' + data.img_view[0]+'?imageView2/2/w/200)'}"><label v-show="data.img.length>1">多图</label></div>
								<div class="item-ifo">
									<div class="ifo-wrap">
										<div class="ifo-wrap-cell">
											<div class="goods-msg clearfix">
												<div class="goods-name ellipsis-2">
													<i class="pre-label" v-show="data.sale_type==2">预售</i>
													<span class="name">{{data.kind_name}}{{data.title}}</span>
												</div>
												<div class="goods-price">
													<div class="pre-date ellipsis" v-if="data.sale_type==2">
														<span class="pre-time ellipsis">{{data.sale_pre.month}}月{{data.sale_pre.day}}上市</span>
													</div>
													<div class="price" v-else>
														<label v-if="data.price_type==2" class="face">面议</label>
														<label v-else><big>{{data.price}}</big>元/{{data.price_unit_name}}</label>
													</div>
												</div>
											</div>
											<div class="goods-from">
												<div class="goods-address ellipsis">
													<i class="address-icon"></i>
													<span>{{data.province_name}}</span>
													<span>{{data.city_name}}</span>
												</div>
												<div class="goods-size">
													<label <label v-if="data.size_unit_name">
														<span>{{data.size_min}}-{{data.size_max}}{{data.size_unit_name}}</span>
													</label>
													<label v-else>规格不限</label>
												</div>
											</div>
											<div class="goods-seller">
												<div class="seller">
													<label class="name ellipsis">
														<span v-if="data.verify_classify" >{{data.verify_name}}</span>
														<span v-else>{{data.contact_name}}</span>
													</label>
													<span class="verify-type firm-jxs" v-if="data.verify_classify==2&&data.verify_type==3"></span>
													<span class="verify-type firm-pfs" v-if="data.verify_classify==2&&data.verify_type==13"></span>
													<span class="verify-type own-jxs" v-if="data.verify_classify==1&&data.verify_type==3"></span>
													<span class="verify-type own-pfs" v-if="data.verify_classify==1&&data.verify_type==13"></span>
													<span class="verify-type own-yf" v-if="data.verify_classify==1&&data.verify_type==12"></span>
													<span class="verify-type own-ywy" v-if="data.verify_classify==1&&data.verify_type==2"></span>
													<span class="verify-type own-yzh" v-if="data.verify_classify==1&&data.verify_type==4"></span>
													<span class="verify-type own-yzj" v-if="data.verify_classify==1&&data.verify_type==11"></span>
												</div>
												<div class="data ellipsis">{{data.updated_view}}</div>
											</div>
										</div>
									</div>
								</div>
							</a>
						</div>
					</div>
					<div class="read-more">
	  					<a class="more-ifo" :href="'#/trade/supplies'">查看更多</a>
	  				</div>
		  		</div>
		  		<div class="shop-list">
					<div class="list-tittle vux-1px-b">
						<div class="tittle-lm">
							<i class="shop-lm-icon"></i>
							<span>每日好店</span>
						</div>
					</div>
					<div v-if="shoploading == true && shopStatus === 'loading'" class="load_wrap" >
						<i class="fa fa-spinner fa-pulse"></i>
						数据加载中...
					</div>
					<div v-else-if="shopStatus === 'error'" class="load_wrap error" @click="getloadingdata()">
						<i class="fa fa-frown-o"></i>
						加载失败，点击刷新
					</div>
		  			<div class="shop-list-wraper" v-else>
		  				<div class="shop-list-item" v-for="(data,index) in shopList">
		  					<a :href="'#/trade/shop/' + data.id ">
			  					<div class="item-shop-ifo">
			  						<div class="shop-portrait" v-bind:style="{backgroundImage: 'url(' + data.avatar_view+'?imageView2/2/w/100)'}"></div>
			  						<div class="shop-tittle">
			  							<div class="shop-table">
			  								<div class="shop-table-cel">
					  							<div class="shop-name ellipsis">
					  								<span v-if="data.verify_classify">{{data.verify_name}}</span>
					  								<span v-else>{{data.contact_name}}</span>
					  							</div>
					  							<span class="verify-type firm-jxs" v-if="data.verify_classify==2&&data.verify_type==3"></span>
												<span class="verify-type firm-pfs" v-if="data.verify_classify==2&&data.verify_type==13"></span>
												<span class="verify-type own-jxs" v-if="data.verify_classify==1&&data.verify_type==3"></span>
												<span class="verify-type own-pfs" v-if="data.verify_classify==1&&data.verify_type==13"></span>
												<span class="verify-type own-yf" v-if="data.verify_classify==1&&data.verify_type==12"></span>
												<span class="verify-type own-ywy" v-if="data.verify_classify==1&&data.verify_type==2"></span>
												<span class="verify-type own-yzh" v-if="data.verify_classify==1&&data.verify_type==4"></span>
												<span class="verify-type own-yzj" v-if="data.verify_classify==1&&data.verify_type==11"></span>
					  						</div>
					  					</div>
			  						</div>
			  					</div>
			  					<div class="shop-shelve clearfix">
			  						<div class="sale ellipsis" v-if="data.kind_supply.length"><i class="sale-icon"></i><span v-for="kind in data.kind_supply">{{kind.name}}</span></div>
			  						<div class="buy ellipsis" v-if="data.kind_demand.length"><i class="buy-icon"></i><span v-for="kind in data.kind_demand">{{kind.name}}</span></div>
			  					</div>
			  				</a>
		  				</div>
		  			</div>
		  		</div>
			</div>
		</scroller>
		<inf-release :releaseshow="releaseshow" @releaseClose="releaseClose"></inf-release>
		<div class="loction-address" v-show="cityshow">
		  	<citys @changeCity="changeCity" :city="currentCity"></citys>
		  	<div class="address-wrap" @click="closeloction"></div>
		</div>
	</div>
</template>

<script>
import infRelease from '@/components/infRelease/infRelease.vue'
import Citys from "@/components/Selector/Citys"
import {Swiper, SwiperItem, Scroller} from 'vux'

export default {
	data () {
    return {
		banner:[],
	    supplyList:[],
	    demandList:[],
	    shopList:[],
	    banner:[],
	    kind:[],
	    supplyloading:true,
	    demandloading:true,
	    shoploading:true,
	    kindloading:true,
	    supplyStatus:"loading",
	    demandStatus:"loading",
	    shopStatus:"loading",
	    kindStatus:"loading",
	    releaseshow: false,
	    cityshow:false,
	    locationcity:"",
	    locationprovince:"",
	    locationaddress:"",
	    currentCity: {
	        id: 0,
	        name: "全国",
	        level: 2,
	        upid: 0
	      },
    }
	},
  methods: {
		getloadingdata(){
		  	window.location.reload()
		},
		releaseopen(){
	  		this.releaseshow = true;
		},
		citysopen(){
			this.cityshow = true;
		},
		releaseClose(){
			this.releaseshow = false;
		},
		closeloction(){
			this.cityshow =false;
		},
		changeCity(city) {
			this.currentCity = city
			this.cityshow = false
			let data = {id : this.currentCity.id}
			axios.post('/api/user/setLocation',qs.stringify(data)).then( response=>{
				this.locationcity=response.data.resp_data.city_name;
				this.locationprovince=response.data.resp_data.province_name;
			})
	  	},
	    all() {
	      return {
	        city: this.currentCity.id
	      }
	    }
	},
  mounted() {
		axios.get('/api/trade/index/getBanner').then(ret => {
	    	this.banner = ret.data.resp_data;
	    });
	    axios.get('/api/user/getLocation').then(ret => {
	    	this.locationaddress = ret.data.resp_data.district.city_name;
	    });
	    axios.get('/api/trade/index/getDemandList').then(ret => {
	    	this.demandList = ret.data.resp_data;
	    	this.demandloading =false
	    	}, function (err) {
	        this.demandloading =false;
	        this.demandStatus="error"
	    });
	    axios.get('/api/trade/index/getSupplyList').then(ret => {
	    	this.supplyList = ret.data.resp_data;
	    	this.supplyloading =false
	    	}, function (err) {
	        this.supplyloading =false;
	        this.supplyStatus="error"
	    });
	    axios.get('/api/trade/index/getShopList').then(ret => {
	    	this.shopList = ret.data.resp_data;
	    	this.shoploading =false
	    	}, function (err) {
	        this.shoploading =false;
	        this.shopStatus="error"
	    });
	    axios.get('/api/trade/index/getInfoSub?page_size=5').then(ret => {
	    	this.kind= ret.data.resp_data.kindList;
	    	this.kindloading =false
	    	}, function (err) {
	        this.kindloading =false;
	        this.kindStatus="error"
	    })
	},
  computed: {
		loginStatus() {
			return this.$store.state.user.loginStatus
		}
	},
  components: {
    Swiper,
    SwiperItem,
    infRelease,
    Citys,
    Scroller
  	}
}
</script>

<style>
@import url("../../styles/common/trade/trade-common.css");
@import url("../../styles/common/trade/trade-index.css");
.mt-s-address{display: flex;width: 100%;flex-direction: row;position: fixed;z-index: 15;top:0;left: 0;right: 0;background: #fff;}
.mt-s-address ul{position: relative;max-height:70vh;overflow-y: scroll;font-size:14px;}
.mt-s-address ul li{height: 40px;line-height: 40px;padding-left: 20px;}
.mt-s-address ul li::before{position: absolute;content: '';height: 1px;left: 0;right: 0; background:#ddd8cd;}
.mt-s-address ul::-webkit-scrollbar{display: none;}
.loction-address{position: fixed;top: 0;bottom: 0;left: 0;right: 0;background:rgba(0,0,0,0.7);z-index:1000;}
.address-wrap{position: fixed;bottom: 0;left:0;right: 0;top: 70%;width: 100%;}
</style>
